<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>立体幻灯片</title>
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
	</head>
	<body>
		<div id="slide">
			<ul>
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var pics = [
			{img:"img/1.jpg",url:"#"},
			{img:"img/2.jpg",url:"#"},
			{img:"img/3.jpg",url:"#"},
			{img:"img/4.jpg",url:"#"},
		];
//		创建对象    ID告诉我们对象执行的位置      data将要处理的图像数据
		slide = function(id,data){
			this.id = id;
			this.data = data;
//			抓取舞台元素
			this.div = document.getElementById(id);
			this.ul = this.div.getElementsByTagName('ul')[0]
//			图片的宽度
			this.imgWidth = 480;
//			块的宽度
			this.BoxWidth = 30;
//			快的数量
			this.boxNum = Math.floor(this.imgWidth/this.BoxWidth);
//			核心执行函数的构建
			this.run = function(){
//				一步步执行以下函数
				this.createBox();
				this.createText();
				this.change();
			}
//			创建快的元素
			this.createBox = function(){
				var li = "";
				for (var i=0;i<this.boxNum;i++) {
//					Li的开始
					li = li + "<li>";
					for (var j=0;j<this.data.length;j++) {
//						设置不同a的背景
						var style = "background:url("+ data[j]['img'] +") no-repeat "+ i*-this.BoxWidth +"px 0px"
//						把a的背景填入a
						li = li + "<a href='"+ data[j]['url'] +"' style='"+ style +"'></a>";
					}
//					Li的结束
					li = li + "</li>"
					
				}
//				把LI填入到UL里
				this.ul.innerHTML = li;
			}
//			创建序号的元素
			this.createText = function(){
				var nav = "<nav>"
//				生成多个可点击的序号
				for (var i=0;i<data.length;i++) {
					nav = nav + "<a href='javascript:;'>"+ (i+1) +"</a>";
				}
				nav = nav + "</nav>";
//				+=用来以免替换掉UL
				this.div.innerHTML += nav;
			}
//			点击执行旋转函数
			this.change=function(){
//				抓取所有的li    和    nav的A
				var list = this.div.getElementsByTagName('li');
				var aList = this.div.getElementsByTagName('nav')[0].getElementsByTagName('a');
//				绑定点击事件     这种写法可以把i传入函数   自调用
				for (var i=0;i<aList.length;i++) {
					aList[i].onclick=(function(index){
						return function(){
//							让所有序号背景变灰色点击的变红色
							for (j=0;j<aList.length;j++) {
								aList[j].style.background='#999999';
							}
                        	this.style.background='red';
                        	var s = Math.floor(Math.random()*2)
							for (var n=0;n<list.length;n++) {
								if(s==1){
//									让li旋转
									list[n].style.transform = "rotateX(-"+ index*90 +"deg)";
//									时间间隔
									list[n].style.transition = "1s "+n*80+"ms";
								}else{
//									让li旋转
									list[n].style.transform = "rotateX(-"+ index*90 +"deg)";
//									时间间隔
									list[n].style.transition = "1s "+80+"ms";
								}

								
								
								
								
								
							}
						}
					})(i);
				}
				
				
				
				
			}
			
		}
//		实例化对象
		var slide_obj = new slide("slide",pics);
		slide_obj.run();
		
		
		
		
		
		
		
		
	</script>
</html>
